<template>
</template>
<script lang="ts">
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 初始化场景、相机、渲染器
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 20, 30);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 添加地面
const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(100, 100),
  new THREE.MeshStandardMaterial({ color: 0x333333, side: THREE.DoubleSide })
);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

// 灯光
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 20, 10);
scene.add(light);

// 雨滴参数
const rainCount = 10000;
const rainGeometry = new THREE.BufferGeometry();
const positions = [];

for (let i = 0; i < rainCount; i++) {
  positions.push(
    (Math.random() - 0.5) * 100,  // x
    Math.random() * 50 + 10,     // y
    (Math.random() - 0.5) * 100  // z
  );
}
rainGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

// 雨滴材质
const rainMaterial = new THREE.PointsMaterial({
  color: 0xaaaaaa,
  size: 0.2,
  transparent: true,
  opacity: 0.8
});

const gridHelper = new THREE.GridHelper(100, 100, 0x444444, 0x888888);
scene.add(gridHelper);

// 雨滴粒子系统
const rain = new THREE.Points(rainGeometry, rainMaterial);
scene.add(rain);

// 动画循环
function animate() {
  const pos = rain.geometry.attributes.position;
  for (let i = 0; i < pos.count; i++) {
    pos.array[i * 3 + 1] -= 0.3;  // y -= 下降速度
    if (pos.array[i * 3 + 1] < 0) {
      pos.array[i * 3 + 1] = 50 + Math.random() * 10; // 重置高度
    }
  }
  pos.needsUpdate = true;

  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();


</script>